<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="../../lib/jquery-3.4.1.min.js"></script>
    <script src="../../lib/jquery-migrate-1.2.1.min.js"></script>

    <link rel="stylesheet" href="/assets/bootstrap.min.css"/>
    <link href="/assets/font-awesome.min.css" rel="stylesheet">

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

    <link rel="stylesheet" href="../../dist/drawerJs.css"/>
    <script src="../../dist/drawerJs.standalone.js"></script>
  
    <style>
        .tool-color {
            color: red;
        }
        /* .toolbar-button-icon{
            background-color: yellow!important;
        } */
    </style>
</head>

<body>
<div>
	<h3 class=text-center>DrawerJs Demonstration</h3>
	<div id="canvas-editor" style="position: absolute; left: 100px; top: 200px;"></div>
</div>
<script>
   
    $(document).ready(function () {
        var drawerPlugins = [
            // Drawing tools
          
            'Pencil',
            'Eraser',
            'Text',
            'Line',
            'ArrowOneSide',
            'ArrowTwoSide',
            'Triangle',
            'Rectangle',
            'Circle',
            // 'Image',
            // 'BackgroundImage',
            'Polygon',
            'ImageCrop',
            'ExportImage',
            'ClearCanvas',

            // Drawing options 
            'Color',
            'ShapeBorder',
            'BrushSize',
            'OpacityOption',

            'LineWidth',
            'StrokeWidth',

            'Resize',
            'ShapeContextMenu',
            'CloseButton',
            'OvercanvasPopup',
            'OpenPopupButton',
            'MinimizeButton',
            'ToggleVisibilityButton',
            'MovableFloatingMode',
            'FullscreenModeButton',

            'TextLineHeight',
            'TextAlign',

            'TextFontFamily',
            'TextFontSize',
            'TextFontWeight',
            'TextFontStyle',
            'TextDecoration',
            'TextColor',
            'TextBackgroundColor'
        ];

        // drawer is created as global property solely for debug purposes.
        // doing  in production is considered as bad practice
        window.drawer = new DrawerJs.Drawer(null, {
            plugins: drawerPlugins,
            corePlugins: [
                'Zoom' // use null here if you want to disable Zoom completely
            ],
            pluginsConfig: {
                Pencil:{
                    faClass: 'fa fa-pencil tool-color'
                },
                Eraser:{
                    faClass: 'fa fa-eraser'
                },
                Text: {
                    faClass: 'fa fa-font',
                    editIconMode : false,
                    editIconSize : 'large',
                    defaultValues : {
                      fontSize: 72,
                      lineHeight: 2,
                      textFontWeight: 'bold'
                    },
                    predefined: {
                      fontSize: [8, 12, 14, 16, 32, 40, 72],
                      lineHeight: [1, 2, 3, 4, 6]
                    }
                },
                Line: {
                    faClass: 'fa fa-line'
                }, 
                ArrowOneSide: {
                    faClass: 'fa fa-long-arrow-right'
                },
                ArrowTwoSide:{
                    faClass: 'fa fa-arrows-h'
                },
                Rectangle:{
                    faClass: 'fa fa-square'
                },
                Polygon:{
                    faClass: 'fa fa-star'
                },
                Circle:{
                    faClass: 'fa fa-circle'
                },
                Triangle:{
                    faClass: 'fa fa-play'
                },
                Image: {
                    faClass: 'fa fa-image',
                    scaleDownLargeImage: true,
                    maxImageSizeKb: 10240, //1MB
                    cropIsActive: true
                },
                BackgroundImage: {
                    scaleDownLargeImage: true,
                    maxImageSizeKb: 10240, //1MB
                    // fixedBackgroundUrl: '/examples/redactor/images/vanGogh.jpg',
                    imagePosition: 'center',  // one of  'center', 'stretch', 'top-left', 'top-right', 'bottom-left', 'bottom-right'
                    acceptedMIMETypes: ['image/jpeg', 'image/png', 'image/gif'] ,
                    dynamicRepositionImage: true,
                    dynamicRepositionImageThrottle: 100,
                    cropIsActive: false
                },
                Zoom: {
                    faClass:'fa fa-search',
                    faClassIn:'fa fa-search-plus',
                    faClassOut:'fa fa-search-minus',
                    enabled: true, 
                    showZoomTooltip: true, 
                    useWheelEvents: true,
                    zoomStep: 1.05, 
                    defaultZoom: 1, 
                    maxZoom: 32,
                    minZoom: 1, 
                    smoothnessOfWheel: 0,
                    //Moving:
                    enableMove: true,
                    enableWhenNoActiveTool: true,
                    enableButton: true
                },
                ExportImage:{
                    faClass: 'fa fa-cloud-download'
                },
                MovableFloatingMode:{
                    faClass: 'fa fa-arrows'
                },
                CloseButton:{
                    faClass:'fa fa-times'
                },
                MinimizeButton:{
                    faClassIn:'fa fa-compress',
                    faClassOut:'fa fa-expand'
                },
                ToggleVisibilityButton:{
                    faClass:'fa fa-eye'
                },
                MovableFloatingMode:{
                    faClass:'fa fa-arrows'
                },  
                FullscreenModeButton:{
                 
                    faClass:'fa fa-window-restore',
                }

            },
            toolbars: {
                drawingTools: {
                    position: 'top',         
                    positionType: 'inside',
                    customAnchorSelector: '#custom-toolbar-here',  
                    compactType: 'scrollable',   
                    hidden: false,     
                    toggleVisibilityButton: false,
                    fullscreenMode: { 
                        position: 'top', 
                        hidden: false,
                        toggleVisibilityButton: false, 
                    }
                },
                toolOptions: {
                    position: 'bottom', 
                    positionType: 'inside',
                    compactType: 'multiple',
                    hidden: false,
                    toggleVisibilityButton: false, 
                    fullscreenMode: {
                       
                        position: 'bottom', 
                        compactType: 'multiple',
                        hidden: false,
                        toggleVisibilityButton: false
                    }
                },
                settings : {
                    position : 'right', 
                    positionType: 'inside',					
                    compactType : 'scrollable',
                    hidden: false,	
                    toggleVisibilityButton: false,
                    fullscreenMode: {
                        position : 'right', 
                        hidden: false,
                        toggleVisibilityButton: false
                    }
                }
            },
             defaultImageUrl: '/examples/redactor/images/drawer.jpg',
            defaultActivePlugin : { name : 'Pencil', mode : 'lastUsed'},
            debug: true,
            activeColor: '#a1be13',
            transparentBackground: true,
            align: 'floating',  //one of 'left', 'right', 'center', 'inline', 'floating'
            lineAngleTooltip: { enabled: true, color: 'blue',  fontSize: 15}
        }, 400, 400);

        $('#canvas-editor').append(window.drawer.getHtml());
        window.drawer.onInsert();
    });
</script>
</body>
</html>
